<template>
    <Editor ref="Editor1" v-model:value="content" api-key="76qdoc48yaccgfnn00pxz6qp5apvrm1cbiooegyvs0zfuzkq" :init="init"/>
</template>
<script>
import Editor from '@tinymce/tinymce-vue';

export default {
    name: "FullEditor",
    components: {
        'Editor': Editor
    },
    props: {
        value: {
            type: String,
            required: true,
        }
    },
    watch: {
        value: {
            handler(newV, oldV) {
              if(newV){
                this.editor.setContent(newV)
              }else{
                this.editor.setContent('')
              }
            },
            immediate: false
        },
        content: {
          handler(newV, oldV) {
            console.log(newV)
          },
          immediate: true
        },
    },
    data: function () {
        return {
            content: '',
            editor: null,
            init: {
                setup: (editor) => {
                    editor.on("init", (e) => {
                        // console.log(555, this.value)
                        editor.setContent(this.value);
                    });
                    this.editor=editor
                },
                init_instance_callback: (editor) => {
                    editor.on("input", (e) => {
                        this.$emit("update:value", e.target.innerHTML);
                    }),
                        editor.on("change", (e) => {
                            this.$emit("update:value", e.level.content);
                        });
                },
                automatic_uploads: true,
                images_upload_handler: async (blobInfo, success, failure) => {
                    // console.log(111, blobInfo, success, failure)
                    let formData = new FormData()
                    formData.append('file', blobInfo.blob())
                    let {code, savename} = await this.post('/index/index/upload', formData)
                    if (code === 1) {
                        success(this.baseURL + '/' + savename)
                    } else (
                        failure('文件上传失败！')
                    )
                },
                branding: false, // 关闭底部官网提示 默认true
                language: 'zh_CN',
                plugins: [
                    'autolink lists advlist link image charmap print preview',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table image paste',
                    'emoticons codesample hr textpattern pagebreak   '
                ],
                //pc端工具栏
                toolbar: 'myCustomToolbarButton code  preview   undo redo ' +
                    ' removeformat  bold italic underline strikethrough  blockquote subscript superscript hr codesample forecolor  backcolor  alignleft aligncenter alignright alignjustify ' +
                    'bullist numlist  ' +
                    ' charmap  emoticons   ' +
                    ' link   ',
                //移动端工具栏
                lists_indent_on_tab: false,
                mobile: {
                    menubar: false,
                    toolbar: 'myCustomToolbarButton undo redo bold italic underline strikethrough'
                },
                quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
                menubar: 'file edit insert view format table tools help',
                min_height: 400
            },
        };
    },
}
</script>

<style scoped lang="less">

</style>